<template>
  <div class="login-container">
    <h1>登录</h1>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div>
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      // 这里可以调用后端API进行登录验证
      console.log("登录用户名:", this.username);
      console.log("登录密码:", this.password);
      this.$router.push("/dashboard"); // 登录成功后跳转到仪表盘
    },
  },
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>
